<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<!-- 元素遍历：用于DOM树中遍历元素 【理解：针对元素嵌套，父子级】
		     children()   功能：获取匹配元素集合中每个元素的子元素
			 parent()     功能：获取匹配元素集合中每个元素的父元素
			 
			 siblings()   功能：获取匹配元素集合中每个元素的所有兄弟元素
			 
			 next()       功能：获取匹配元素集合中每个元素的下一个兄弟元素
			 prev()       功能：获取匹配元素集合中每个元素的上一个兄弟元素
			 
			 each()       功能：遍历匹配元素的集合--遍历所有子元素
			              语法糖：each(function(index,element){
							     $(element).text(`${index}`)
								 注意：打印遍历的值,不可以使用单双引号+拼接
								 功能：获取到的元素，遍历元素内容
						  })  
						         index：下标  形参  element：元素  形参
		 -->
		 <style>
			 .container{
				 border: 1px solid red;
				 padding: 10px;
				 margin: 10px;
			 }
			 .container div.box{
				 background: #ffff7f;
				 padding: 10px;
				 margin: 10px;
			 }
			 button{
				  margin: 10px;
			 }
		 </style>
	<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
			<div class="box" id="box5">盒子5</div>
			<div class="box" id="box6">盒子6</div>
		</div>
		<button id="childrenBtn">获取子元素</button>
		<button id="parentBtn">获取父元素</button>
		<button id="siblingsBtn">获取兄弟元素</button>
		<button id="nextBtn">获取下一个兄弟</button>
		<button id="prevBtn">获取上一个兄弟</button>
		<button id="eachBtn">遍历元素</button>
	<script>
		/* 1.点击获取子元素 按钮  实现.container下所有子元素添加背景色 */
		$("#childrenBtn").click(function(){
			//通过 父找子  函数
			$(".container").children().css("background-color","#fde0ff");
		});
		/* 2.点击  获取父元素  实现.container改变背景色*/
		$("#parentBtn").click(function(){
			$("#box1").parent().css("background-color","aqua");
		});
		/* 3.点击 获取兄弟元素 实现除了#box4 字体颜色不变，其他都变色*/
		$("#siblingsBtn").click(function(){
			$("#box4").siblings().css("color","#aaaaff");
		});
		/* 4.点击 获取下一个兄弟 实现#box4 下一个兄弟添加背景色 */
		$("#nextBtn").click(function(){
			$("#box4").next().css("background-color","#ff9f2a");
		});
		/* 5.点击 获取上一个兄弟 实现#box6 上一个兄弟 添加效果
		                             圆、背景图、背景色、盒子阴影
		 */
		$("#prevBtn").click(function(){
			$("#box6").prev().css({
				"width":"300px",
				"height":"300px",
				"border-radius":"50%",
				"background-image":"url(../img/图片1.gif)",
				"background-color":"#00ff7f",
				"background-size":"100% 100%",
				"box-shadow":"5px 5px 10px #6b6b6b",
				"font-size":"0"
			});
		});
		/* 6.点击 遍历元素  按钮   实现每个盒子上，这是第几个盒子 */
		$("#eachBtn").click(function(){
			//通过 .box 抓到6个元素【一组集合】
			$(".box").each(function(i,e){ //e代表6个元素   i代表下标
				//每个盒子加文字：这是第几个盒子
				$(e).text(`这是第${i+1}盒子`);
			});
		});
		
		/* 
		 大作业：tab选项卡
		 BOM【了解】吸顶灯效果案例
		 小米页面效果
		 */
	</script>
	</body>
</html>